<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="车牌号">
            <el-input v-model="searchForm.licensePlate" placeholder="请输入车牌号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车架号(VIN)">
            <el-input v-model="searchForm.vin" placeholder="请输入车架号(VIN)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-end">
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon><el-icon>
              <Refresh />
            </el-icon></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="行驶证" align="center" width="120">
        <template #default="{ row }">
          <el-image preview-teleported :src="row.drivingLicense" :z-index="100" style="width: 100px; height: 100px"
            :preview-src-list="[row.drivingLicense]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="汽修站" prop="repair" align="center" width="180"></el-table-column>
      <el-table-column label="车牌号" prop="licensePlate" align="center" width="180"></el-table-column>
      <el-table-column label="车架号(vin)" prop="vin" align="center" width="180"></el-table-column>
      <el-table-column label="车型" prop="vehicleModel" align="center" width="180"></el-table-column>
      <el-table-column label="客户姓名" prop="customerName" align="center" width="180"></el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center" width="180"></el-table-column>
      <el-table-column label="年检到期时间" prop="annualExpireTime" align="center" width="180"></el-table-column>
      <el-table-column label="保险到期时间" prop="insuranceExpireTime" align="center" width="180"></el-table-column>
      <el-table-column label="回访时间" prop="lastTime" align="center" width="180"></el-table-column>
      <el-table-column label="操作" align="center" width="240" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
          <el-button type="primary" @click="handleCreateDetail()">详情</el-button>
          <el-button type="primary" @click="handleCreateVisit()">回访</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="flex justify-center mt-2" background layout="total,prev, pager, next"
      :current-page="currentPage" :page-size="limit" :total="total" @current-change="handleGetTableList" />
    <!-- 修改 -->
    <form-drawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="车牌号" prop="licensePlate">
          <el-input v-model="form.licensePlate" placeholder="请输入车牌号"></el-input></el-form-item>
        <el-form-item label="车架号(vin)" prop="vin">
          <el-input v-model="form.vin" maxlength="17" placeholder="请输入车架号(vin)"></el-input>
        </el-form-item>
        <el-form-item label="车型" prop="vehicleModel">
          <el-input v-model="form.vehicleModel" placeholder="请输入车型"></el-input>
        </el-form-item>
        <el-form-item label="当前里程" prop="mileageNum">
          <el-input v-model="form.mileageNum" type="number" placeholder="请输入当前里程">
            <template #append>公里</template>
          </el-input>
        </el-form-item>
        <el-form-item label="保险到期日期" prop="insuranceExpireTime">
          <el-date-picker v-model="form.insuranceExpireTime" type="date" placeholder="选择保险到期日期"
            value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
        </el-form-item>
        <el-form-item label="年检到期日期" prop="annualExpireTime">
          <el-date-picker v-model="form.annualExpireTime" type="date" placeholder="选择年检到期日期"
            value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
        </el-form-item>
      </el-form>
    </form-drawer>
    <!-- 详情 -->
    <form-dialog ref="formDrawerRefDetail" title="详情" width="98%" top="5vh" :isButton="false">
      <div class="dialog-body">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="客户姓名">Lucas</el-descriptions-item>
          <el-descriptions-item label="联系方式">1572765572</el-descriptions-item>
          <el-descriptions-item label="车牌号">赣B123123</el-descriptions-item>
          <el-descriptions-item label="车型">大众</el-descriptions-item>
          <el-descriptions-item label="保险到期时间">2024-06-06</el-descriptions-item>
          <el-descriptions-item label="接车公里数">11120km</el-descriptions-item>
        </el-descriptions>
        <!-- @tab-click="handleClick" -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="维修记录" name="first" class="dialog-content">
            <el-timeline>
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" class="ml-2">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="订单编号">xct202409808</el-descriptions-item>
                  <el-descriptions-item label="维修师傅">李敏</el-descriptions-item>
                  <el-descriptions-item label="取车时间">2024-05-12</el-descriptions-item>
                  <el-descriptions-item label="维修备注">测试</el-descriptions-item>
                </el-descriptions>
                <el-card class="my-2">
                  <template #header>项目工时费: ¥120</template>
                  <el-table :data="tableData">
                    <el-table-column prop="name" label="配件名称" />
                    <el-table-column prop="accessoryNumber" label="配件数量" />
                    <el-table-column prop="price" label="配件单价" />
                  </el-table>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" class="ml-2">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="订单编号">xct202409808</el-descriptions-item>
                  <el-descriptions-item label="维修师傅">李敏</el-descriptions-item>
                  <el-descriptions-item label="取车时间">2024-05-12</el-descriptions-item>
                  <el-descriptions-item label="维修备注">测试</el-descriptions-item>
                </el-descriptions>
                <el-card class="my-2">
                  <template #header>项目工时费: ¥120</template>
                  <el-table :data="tableData">
                    <el-table-column prop="name" label="配件名称" />
                    <el-table-column prop="accessoryNumber" label="配件数量" />
                    <el-table-column prop="price" label="配件单价" />
                  </el-table>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" class="ml-2">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="订单编号">xct202409808</el-descriptions-item>
                  <el-descriptions-item label="维修师傅">李敏</el-descriptions-item>
                  <el-descriptions-item label="取车时间">2024-05-12</el-descriptions-item>
                  <el-descriptions-item label="维修备注">测试</el-descriptions-item>
                </el-descriptions>
                <el-card class="my-2">
                  <template #header>项目工时费: ¥120</template>
                  <el-table :data="tableData">
                    <el-table-column prop="name" label="配件名称" />
                    <el-table-column prop="accessoryNumber" label="配件数量" />
                    <el-table-column prop="price" label="配件单价" />
                  </el-table>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
          <el-tab-pane label="回访记录" name="second" class="dialog-content">
            <el-timeline>
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" class="ml-2">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="回访状态">已回访</el-descriptions-item>
                  <el-descriptions-item label="回访时间">2024-04-22</el-descriptions-item>
                  <el-descriptions-item label="回访人">Lucas</el-descriptions-item>
                  <el-descriptions-item label="回访备注备注">测试</el-descriptions-item>
                </el-descriptions>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/12" placement="top" type="primary" class="ml-2">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="回访状态">已回访</el-descriptions-item>
                  <el-descriptions-item label="回访时间">2024-04-22</el-descriptions-item>
                  <el-descriptions-item label="回访人">Lucas</el-descriptions-item>
                  <el-descriptions-item label="回访备注备注">测试</el-descriptions-item>
                </el-descriptions>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
    </form-dialog>
    <!-- 回访 -->
    <form-drawer ref="formDrawerRefVisit" title="回访" @submit="handleSubmit">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="客户姓名">Lucas</el-descriptions-item>
        <el-descriptions-item label="联系方式">1572765572</el-descriptions-item>
        <el-descriptions-item label="车牌号">赣B123123</el-descriptions-item>
        <el-descriptions-item label="车型">大众</el-descriptions-item>
        <el-descriptions-item label="保险到期时间">2024-06-06</el-descriptions-item>
        <el-descriptions-item label="接车公里数">11120km</el-descriptions-item>
      </el-descriptions>
      <el-form ref="formRefVisit" :model="formVisit" :rules="rulesVisit" label-width="80" class="mt-8">
        <el-form-item label="回访状态">
          <el-radio-group v-model="formVisit.status">
            <el-radio :value="3">已回访</el-radio>
            <el-radio :value="6">未接通电话</el-radio>
            <el-radio :value="9">无需回访</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回访人">
          <el-select v-model="formVisit.person">
            <el-option label="李四" value="李四"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="formVisit.remark"></el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import FormDialog from "@/components/FormDialog.vue";
import { getCarPageApi, editCarApi } from "@/api/repair";

const { tableData, searchForm, currentPage, limit, total, handleRestSearch, handleGetTableList } =
  useInitTable({
    searchForm: {
      licensePlate: "",
      vin: ""
    },
    getTableList: getCarPageApi
  });
//修改
const { formDrawerRef, drawerTitle, form, rules, formRef, handleEdit, handleSubmit } = useInitForm({
  form: {
    id: "",
    licensePlate: "",
    vin: "",
    vehicleModel: "",
    mileageNum: "",
    customerId: "",
    insuranceExpireTime: "",
    annualExpireTime: ""
  },
  rules: {
    licensePlate: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
    vin: [{ required: true, message: "请输入车架号", trigger: "blur" }],
    vehicleModel: [{ required: true, message: "请输入车型", trigger: "blur" }],
    mileageNum: [{ required: true, message: "请输入公里数", trigger: "blur" }],
    annualExpireTime: [{ required: true, message: "请输入年检到期时间", trigger: "blur" }]
  },
  updateData: editCarApi,
  success: () => {
    handleGetTableList();
  }
});

//详情
const { formDrawerRef: formDrawerRefDetail, handleCreate: handleCreateDetail } = useInitForm({});
const activeName = ref("first");

// 回访
const {
  formDrawerRef: formDrawerRefVisit,
  form: formVisit,
  formRef: formRefVisit,
  rules: rulesVisit,
  handleCreate: handleCreateVisit
} = useInitForm({});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 180px);
  overflow-y: auto;
}

.dialog-content {
  height: calc(100vh - 340px);
  overflow-y: auto;
}
</style>
